<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>按钮管理</title>
<%@include file="/head.jsp"%>
<script src="jsp/system/Button/index.js" type="text/javascript"></script>
</head>
<body class="easyui-layout">
	<div region="west" style="width:200px;">
		<div id="index_west" class="easyui-panel" title="按钮总览" border="false">
			<div style="padding: 5px;">
				<ul id="index_button" class="easyui-tree"></ul>
			</div>
		</div>
	</div>
	<div id="index_center" region="center" title="按钮管理">
		<div class="tool-bar">
			<a class="easyui-linkbutton" iconCls="icon-add" plain="true" href="javascript:void(0);" onclick="btn_add();">添加</a>
			<a class="easyui-linkbutton" iconCls="icon-edit" plain="true" href="javascript:void(0);" onclick="btn_edit();">编辑</a>
			<a class="easyui-linkbutton" iconCls="icon-delete" plain="true" href="javascript:void(0);" onclick="btn_delete();">删除</a>
		</div>
		<div class="context">
			<div style="height: 100%;" >
				<table class="easyui-simplegrid" tmpl="#template" pager="#pager" style="width: 800px;">
					<thead class="datagrid-header">
						<tr>
							<th style="width: 30px;"><input type="checkbox" onclick="$('.easyui-simplegrid').simplegrid('selectAll', this.checked);" /></th>
							<th>按钮名称</th>
							<th>按钮方法</th>
							<th>按钮位置</th>
							<th>排序</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
			<!-- 分页 -->
			<div id="pager" class="pager"></div>
			<script id="template" type="text/x-jquery-tmpl">
				<tr>
					<td name="id" value="{{= id}}"><input type="checkbox"/></td>
					<td name="iconcls" style="display:none;">{{= iconcls}}</td>
					<td name="name" value="{{= name}}"><span class="{{= iconcls}}" style="width:17px; height:17px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>{{= name}}</td>
					<td name="event">{{= event}}</td>
					<td name="weiz">{{if weiz == 1}}上{{/if}}{{if weiz == 2}}下{{/if}}</td>
					<td><a href="javascript:void(0);" class="icon-arrow_up" onClick="moveUp({{= id}});">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上移</a>&nbsp;<a href="javascript:void(0);"  class="icon-arrow_down" onClick="moveDown({{= id}});">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下移</a></td>
				</tr>
			</script>
		</div>
	</div>
	<div id="contextmenu" class="easyui-menu" style="width:120px;">
		<div onclick="btn_add();" iconCls="icon-add">添加按钮</div>
		<div onclick="btn_add('tree');" iconCls="icon-add">添加同级按钮</div>
		<div onclick="btn_edit('tree');" iconCls="icon-edit">编辑按钮</div>
		<div onclick="btn_delete('tree');" iconCls="icon-delete">删除按钮</div>
	</div>

	<div id="menuinfo-div" class="easyui-window" modal="true" closed="true" resizable="false" minimizable="false" maximizable="false" collapsible="false" iconcls="icon-add" style="width: 350px; height: 230px; padding: 5px;">
		<form id="menuinfo-form">
			<input type="hidden" name="id" value="" />
			<input type="hidden" name="menuid" value="" />
			<table width="100%" class="table">
				<tr>
					<td width="40%">按钮名称:</td>
					<td width="60%"><input name="name" type="text" /></td>
				</tr>
				<tr>
					<td>按钮方法:</td>
					<td><input name="event" type="text" /></td>
				</tr>
				<tr>
					<td>图标样式:</td>
					<td><input id="menuiconcls" name="iconcls" type="text" style="padding-left: 20px;" onfocus="$('#icons-div').window('open');" readonly="readonly" /></td>
				</tr>
				<tr>
					<td>按钮位置:</td>
					<td>
						<select name="weiz">
							<option value="1">上</option>
							<option value="2">下</option>
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<button id="menuinfo-button" type="button">提交</button>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<button type="button" onclick="$('#menuinfo-div').window('close');$('#menuinfo-form')[0].reset();$('#menuiconcls').removeAttr('class');">取消</button>
					</td>
				</tr>
			</table>
		</form>
	</div>

	<div id="icons-div" class="easyui-window" modal="true" closed="true" minimizable="false" maximizable="false" collapsible="false" iconcls="icon-heart" style="width: 600px; height: 400px; padding: 5px;" title="选择图标">
		<table id="icons-talbe" class="table" style="width:100%;">
		</table>
	</div>

</body>
</html>
